<page-header [title]="l('Books')"></page-header>

<nz-card [nzBordered]="false">

  <div class="mb-md">
    <!-- 模糊搜索框 -->
    <nz-row nzGutter="8">
      <nz-col nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixSearchButton">
              <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()" name="filterText"
                [placeholder]="l('SearchWithThreeDot')">
              <ng-template #suffixSearchButton>
                <button nz-button nzType="primary" nzSearch type="submit" (click)="refresh()">
                  <i class="anticon anticon-search"></i>
                </button>
              </ng-template>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </div>

  <div class="mb-md">
    <!-- 操作常规按钮部分 如： 添加、批量删除、导出Excel表 -->
    <nz-row nzGutter="8">
      <nz-col nzMd="20" nzSm="12" class="btn-gutter">


        <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.Book.Create')" (click)="createOrEdit()">
          <i class="anticon anticon-plus"></i>
          <span>
            {{l("Create")}}
          </span>
        </button>
        <button nz-button [nzType]="'danger'" *ngIf="isGranted('Pages.Book.BatchDelete')" (click)="batchDelete()">
          <i class="anticon anticon-delete"></i>
          <span>
            {{l("BatchDelete")}}
          </span>
        </button>
        <button nz-button nzType="default" *ngIf="isGranted('Pages.Book.ExportToExcel')" (click)="exportToExcel()">
          <i class="anticon anticon-file-excel"></i>
          <span>
            {{l("ExportToExcel")}}
          </span>
        </button>
      </nz-col>
    </nz-row>
  </div>

  <!-- 复选框提示的内容数据部分 -->
  <div class="my-md">
    <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
      <ng-template #message>
        <span [innerHTML]="l('GridSelectedXItemsTips',selectedDataItems.length)"></span>
        <a (click)="restCheckStatus(dataList)" class="ml-md">
          {{l('ClearEmpty')}}
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="refreshGoFirstPage()">
          {{l('Refresh')}}
        </a>
      </ng-template>
    </nz-alert>
  </div>

  <!-- 实体的表格内容 -->
  <nz-row class="my-md">
    <nz-table #ajaxTable [nzData]="dataList" [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="pageSize"
      [nzLoading]="isTableLoading" (nzPageIndexChange)="pageNumberChange()" (nzPageSizeChange)="refresh()"
      [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzNoResult]="noDataTemplate" [nzShowTotal]="showTotalTemplate"
      [nzFrontPagination]="false">
      <!-- 暂无数据组件 -->
      <ng-template #noDataTemplate>
        <no-data></no-data>
      </ng-template>
      <!-- 分页信息显示 当前 1 页/共 3 页，共 5 条/显示 1-2 条 -->
      <ng-template #showTotalTemplate let-total let-range="range">
        {{l('GridFooterDisplayText',pageNumber,totalPages,total,range[0],range[1])}}
      </ng-template>
      <!-- 表头 -->
      <thead (nzSortChange)="gridSort($event)">
        <tr>
          <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate"
            (nzCheckedChange)="checkAll($event)"></th>
          <th nz-th nzShowSort nzSortKey="Name">
            <span>{{l('Name')}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="Author">
            <span>{{l('Author')}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="Intro">
            <span>{{l('Intro')}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="PriceUrl">
            <span>{{l('PriceUrl')}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="ImgUrl">
            <span>{{l('ImgUrl')}}</span>
          </th>
          <th nzWidth="230px" class="text-center">
            <span>{{l('Actions')}}</span>
          </th>
        </tr>
      </thead>
      <!-- 表格内容 -->
      <tbody>
        <tr *ngFor="let item of ajaxTable.data">
          <!-- 全选框 -->
          <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus(dataList)"></td>

          <td nz-td>
            <ellipsis lines="1">
              <span nz-tooltip [nzTitle]="item.name">
                {{item.name}}
              </span>
            </ellipsis>
          </td>
          <td nz-td>
            <ellipsis lines="1">
              <span nz-tooltip [nzTitle]="item.author">
                {{item.author}}
              </span>
            </ellipsis>
          </td>
          <td nz-td>
            <ellipsis lines="1" style="width: 230px">
              <span nz-tooltip [nzTitle]="item.intro">
                {{item.intro}}
              </span>
            </ellipsis>
          </td>
          <td nz-td>
            <ellipsis lines="1">
              <span nz-tooltip [nzTitle]="item.priceUrl">
                {{item.priceUrl}}
              </span>
            </ellipsis>
          </td>
          <td nz-td>
            <img [src]="item.imgUrl" alt="封面图片" (click)="showImg(item.imgUrl)" />
          </td>


          <td>
            <!-- 编辑 -->
            <ng-container *ngIf="isGranted('Pages.Book.Edit')">
              <a (click)="createOrEdit(item.id)">
                <i class="anticon anticon-edit mr-sm"></i>
                <span>{{l('Edit')}}</span>
              </a>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <!-- 删除 -->
            <ng-container *ngIf="isGranted('Pages.Book.Delete')">
              <nz-popconfirm [nzTitle]="l('ConfirmDeleteWarningMessage')" (nzOnConfirm)="delete(item)" [nzOkText]="l('Ok')"
                [nzCancelText]="l('Cancel')">
                <a nz-popconfirm>
                  <i class="anticon anticon-delete mr-sm"></i>
                  <span>{{l('Delete')}}</span>
                </a>
              </nz-popconfirm>
            </ng-container>
            <!-- 更多 -->
            <ng-container *ngIf="isGrantedAny('Pages.Book', 'Pages.Book.Create', 'Pages.Book.Edit')">
              <nz-divider nzType="vertical"></nz-divider>
              <nz-dropdown>
                <a nz-dropdown>
                  <i class="anticon anticon-down"></i>
                  <span>{{l('More')}}</span>

                </a>
                <!-- <ul nz-menu>
                                    <li nz-menu-item  ngIf = "isGranted('Pages.Book.Edit')"  (click)="createOrEdit(item.id) ">
                                        <a>
                                            <i class="anticon anticon-safety mr-sm"></i>
                                            <span>{{l('Edit')}}</span>
                                        </a>
                                    </li>
                                    <li nz-menu-item   *ngIf = "isGranted('Pages.Book.Delete')"  (click)="delete(item) ">
                                        <a>
                                            <i class="anticon anticon-unlock mr-sm"></i>
                                            <span>{{l('Delete')}}</span>
                                        </a>
                                    </li>
                                </ul> -->
              </nz-dropdown>
            </ng-container>
          </td>
        </tr>
      </tbody>
    </nz-table>

  </nz-row>
</nz-card>
